<template>
  <view>
    <u-swipe-action v-for="item in 5">
      <u-swipe-action-item :options="options2" @click="opthert(item)">
        <view class="htclt">
          <view class="htclt_left">
            <view class="htclt_left_img">
              <img
                src="https://cdn.uviewui.com/uview/swiper/swiper3.png"
                alt=""
                srcset=""
              />
            </view>
          </view>
          <view class="htclt_right">
            <view> xxxxxx </view>
            <view> 2024-07-31 </view>
          </view>
        </view>
      </u-swipe-action-item>
    </u-swipe-action>
    <u-modal
      :show="show"
      :title="isCoum == 0 ? '驳回' : '通过'"
      @confirm="confirm"
      showCancelButton="true"
      :content="isCoum == 0 ? `是否驳回&{titleName}的申请` : '是否通过&{titleName}的申请'"
    ></u-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      options2: [
        {
          text: "驳回",
          style: {
            backgroundColor: "#f56c6c",
          },
        },
        {
          text: "通过",
          style: {
            backgroundColor: "#3c9cff",
          },
        },
      ],
      isCoum: "",
	  titleName:"",
      show: false,
    };
  },
  methods: {
    opthert(e,i) {
		console.log(e,i);
		return
      this.isCoum = e.index;
	  this.titleName = i;
      this.show = true;
    },
    confirm() {
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>

<style lang='scss' scope>
.htclt {
  display: flex;
  padding: 15px;
  background: #f7f7f7;
  &_left {
    &_img {
      width: 68px;
      height: 68px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 53px;
      }
    }
  }
  &_right {
    margin-left: 15px;
    line-height: 33px;
  }
}
/deep/.u-swipe-action {
  margin-bottom: 4px !important;
}
</style>
